<template>
	<view class="page-body" >
    <view @click="openMod('昵称', userInfo.nickname)">
      <my-list v-model="userInfo.nickname">昵称</my-list>
    </view>
    <view @click="openMod('邮箱',userInfo.email)">
      <my-list v-model="userInfo.email">邮箱</my-list>
    </view>
    <view @click="openMod('手机', userInfo.phone)">
      <my-list v-model="userInfo.phone">手机</my-list>
    </view>
    <my-list>简介</my-list>
    
    <wyb-popup ref="modup" type="center" height="400" width="500" radius="6" :showCloseIcon="true">
      <view class="modup-body">
        <view class="">{{modTitle}}</view>
        <input type="text" placeholder="" v-model="modValue">
        <button type="default">确定</button>
      </view>
    </wyb-popup>
	</view>
</template>

<script>
import myList from '@/components/my-list.vue'
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
export default {
  components:{
    myList,
    wybPopup
  },
  data() {
    return {
      userInfo: {
        nickname: 'tkk',
        email: '1312308948@qq.com',
        phone: '未绑定',
      },
      modTitle: "昵称",
      modValue: '123',
      
    }
  },
  methods: {
    openMod(title, value){
      this.modTitle = title,
      this.modValue = value,
      this.$refs.modup.show()
    }
  }
}
</script>

<style>
.page-body{
  background-color: #f4f4f4;
  height: 100%;
}
.modup-body{
  padding: 40rpx 20rpx;
}
.modup-body>input{
  margin-top: 30rpx;
  height: 68rpx;
  padding: 0 10rpx;
  border: solid 1rpx #efe5f4;
  border-radius: 5rpx;
}
.modup-body>button{
  margin-top: 40rpx;
  font-size: 28rpx;
}
</style>
